<template>
  <Row>
    <Col :span="12" :offset="4">
      <ButtonGroup>
        <Button
          type="primary"
          :loading="databaseLoading.state.value"
          @click="handleUpdateDatabaseBackup"
        >
          <template #icon>
            <CloudUploadOutlined />
          </template>
          立即更新数据库备份
        </Button>
        <Button type="primary" :disabled="true">
          <template #icon>
            <CloudDownloadOutlined />
          </template>
          从备份文件恢复数据库（暂不支持）
        </Button>
        <Button type="primary" :loading="archiveLoading.state.value" @click="handleUpdateArchive">
          <template #icon>
            <SyncOutlined />
          </template>
          更新 Archive
        </Button>
      </ButtonGroup>
    </Col>
  </Row>
</template>

<script lang="ts" setup>
import { Button, ButtonGroup, Col, Modal, Row } from 'ant-design-vue'
import { CloudUploadOutlined, CloudDownloadOutlined, SyncOutlined } from '@ant-design/icons-vue'

import { updateDatabaseBackup, updateArchiveCache } from '@/store/system'
import { useLoading } from '@/handcer'

const databaseLoading = useLoading()
const archiveLoading = useLoading()

const handleUpdateDatabaseBackup = () => {
  Modal.confirm({
    centered: true,
    title: '更新备份会导致强制覆盖旧的数据库备份，确定要继续吗？',
    onOk: () => databaseLoading.promise(updateDatabaseBackup()),
  })
}

const handleUpdateArchive = () => {
  Modal.confirm({
    centered: true,
    title: '将会更新全站的所有全量数据缓存，确定要继续吗？',
    onOk: () => archiveLoading.promise(updateArchiveCache()),
  })
}
</script>
<style lang="less" scoped>
.announcement {
  .toolbar {
    display: flex;
    justify-content: space-between;

    .select {
      width: 130px;
    }
    .search {
      width: 200px;
    }
  }
}
</style>
